<template>
	<view class="container">
		<view class="section" v-for="item in firstData" :key="item.id">
			<view class="frame">
				<text>{{item.text}}</text>
				<image :src="item.img" mode=""></image>
			</view>
			<view class="content">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstData:[
					{
						id:1,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:2,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:3,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:4,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:5,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:6,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:7,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:8,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:9,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:10,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
					{
						id:11,
						text:"共11课",
						img:"/static/Luffy.jpg",
						name:"课程名称"
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
	}
	.section{
		width: 50%;
	}
	.frame{
		width: 100%;
		position: relative;
		margin-top: 10px;
	}
	text{
		position: absolute;
		bottom: 4px;
		right: 4px;
	}
	image{
		height: 100px;
		width: 100%;
	}
</style>
